<template>
  <div class="toast-wrap animated" :class="toastCls">
    <div class="close-btn" @click="closeFn">
      x
    </div>
    <div class="toast-line toast-line1 flex flex-l">
      <span class="tip-icon">X</span>
      <div class="tip-content">
        <div v-if="tipTit" class="tip-title" v-html="tipTit"></div>
        <div class="tip-text" v-html="message"></div>
      </div>
    </div>
    <div class="toast-line toast-line2" @click="viewMore=!viewMore">
      <span class="view-more">{{ viewMore ? '收起《《' : '查看更多》》' }}</span>
    </div>
    <div class="toast-line toast-line3 flex flex-r">
      <span class="tip-btn3" @click="closeFn">我知道了({{ time }})</span>
    </div>
  </div>
</template>

<script>
export default {
  name: 'ToastWrap',
  data () {
    return {
      viewMore: false, // 构造函数（父级）有监听该变量，注意修改
      tipTit: '',
      message: ''
    }
  },
  computed: {
    toastCls () {
      const cls = [this.type, ...this.wrapCls]
      if (this.viewMore) {
        cls.push('view-more-content')
      }
      return cls
    }
  },
  watch: {
    msg: {
      handler (val) {
        if (val) {
          const vObj = this.hasSpecialSymbols(val)
          const arr = vObj.msg.split('<br/>')
          // console.log('vObj', vObj)
          // console.log('arr', arr)
          // debugger
          // 第一个默认是标题
          this.tipTit = ''
          if (arr.length > 1) {
            this.tipTit = arr[0]
          }
          // 获取提示内容
          this.message = ''
          arr.forEach((value, i) => {
            // console.log(i, value)
            if (i > 0) {
              this.message += `<p class="content-line">${value}</p>`
            }
          })
          // console.log('this.message', this.message)
        }
      },
      immediate: true
    }
  },
  mounted () {
    // this.$nextTick(() => {
    //   setTimeout(() => { // 挂载需要时间
    //     // debugger
    //     // 挂在完毕后，计算窗体高度
    //     this.$emit('customEvent', { fnName: 'cacularDomH' })
    //   }, 100)
    // })
  },
  methods: {
    // 父级调用 - 更新模板数据
    updateTempData ({ key, value }) {
      this[key] = value
      // debugger
    },
    // 关闭弹窗
    closeFn () {
      // debugger
      this.$emit('customEvent', { fnName: 'close' })
    },
    // 判断是否包含换行符， 是则替换成<br/>
    hasSpecialSymbols (msg) {
      let msgStr = msg
      const reg = new RegExp('[\\n|\\r]', 'gi')
      const dangerouslyUseHTMLString = reg.test(msgStr)
      if (dangerouslyUseHTMLString) {
        msgStr = msgStr.replace(reg, '<br/>')
        // msgStr += `<p class="pd-l10">${msg.message}</p>`
      }
      // debugger
      // console.log('msgStr', msgStr)
      return {
        dangerouslyUseHTMLString,
        msg: msgStr
      }
    }
  }
}
</script>

<style>
@keyframes show {
  0% {
    top: 10px;
    opacity: 0;
  }
  100% {
    top: 40px;
    opacity: 1;
  }
}
@keyframes hide {
  0% {
    top: 40px;
    opacity: 1;
  }
  100% {
    top: 0px;
    opacity: 0;
  }
}

.toast-dialog-box {
  position: fixed;
  top: 30px;
  left: 0;
  z-index: 1999;
  width: 100%;
  opacity: 1;
  /* 设置元素是否对鼠标事件做出反应： */
  /* pointer-events: none; */
  /* transform: translateX(-50%); */
  /* animation: show 0.3s forwards; */
  transition: all 2s;
}
.toast-wrap {
  position: relative;
  margin: 0 auto;
  margin-bottom: 20px;
  margin-right: 20px;
  padding: 15px 15px 15px 20px;
  width: 350px;
  font-size: 14px;
  pointer-events: auto;
  background-color: #edf2fc;
  /* border: 1px solid #ebeef5; */
  border-radius: 8px;
  box-shadow: 0 0px 6px #b7b7b7;
  transition: all 0.3s;
}
.toast-wrap.in {
  opacity: 0;
}
.toast-wrap.out {
  opacity: 0;
}
.toast-dialog-box.hide-remove {
  animation: hide 0.3s forwards;
}
.toast-dialog-box .toast-wrap.success {
  background-color: #d4f3c2;
  color: #67c23a;
}
.toast-dialog-box .toast-wrap.error {
  background-color: #fbd0d0;
  color: #f56c6c;
}
.toast-dialog-box .toast-wrap.warning {
  background-color: #f5e5ce;
  color: #e6a23c;
}

.toast-dialog-box .close-btn {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 10px;
  height: 10px;
  text-align: center;
  cursor: pointer;
}

.toast-dialog-box .toast-line1 {
  line-height: 30px;
}

.toast-dialog-box .toast-line1 {
  align-items: flex-start;
}
.toast-dialog-box .toast-line1 .tip-icon {
  color: #fe7c83;
}
.toast-dialog-box .toast-line1 .tip-content {
  margin-left: 4px;
  max-height: 100px;
  overflow: hidden;
  transition: all 0.3s;
}
.view-more-content .toast-line1 .tip-content {
  max-height: none;
}
.toast-dialog-box .toast-line1 .tip-content .tip-title {
  font-weight: bold;
  color: #333;
  font-size: 16px;
}
.toast-dialog-box .toast-line1 .tip-content .content-line {
  margin: 4px 0;
  padding: 0;
  line-height: 24px;
  color: #484747;
}

.toast-line2 {
  padding: 6px 0;
}
.toast-line2 .view-more {
  color: #747474;
  cursor: pointer;
}
.toast-dialog-box .toast-line3 .tip-btn3 {
  color: #2463c6;
  cursor: pointer;
}

.flex {
  display: flex !important;
  justify-content: center;
  align-items: center;
}

.flex1 {
  display: flex;
  justify-content: center;
  align-items: center;
}

.flex-l {
  justify-content: flex-start !important;
}

.flex-r {
  justify-content: flex-end;
}

.flex-c {
  justify-content: center;
}

.flex-a {
  justify-content: space-around;
}

.flex-b {
  justify-content: space-between;
}

.flex-wrap {
  flex-wrap: wrap;
}

.flex-nowrap {
  flex-wrap: nowrap;
}
</style>
